<template>
    <div class="van-tab__panel-wrappercontainer">
        <span class="time">{{ minute }}</span> 分
        <span class="time">{{ second }}</span> 秒
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
const props = defineProps({
    time: {
        type: Number,
        default: 0
    }
})

const minute = ref(0);
const second = ref(0);
const countdown = ref(0);
let timer = null;

onMounted(() => {
    countdown.value = props.time;
    countdownFunc();
    timer = setInterval(() => {
        countdownFunc();
    }, 1000);
})

function countdownFunc() {

    countdown.value--;
    if (countdown.value <= 0) {
        countdown.value = 0;
        return;
    }
    minute.value = Math.floor(countdown.value / 60);
    second.value = countdown.value % 60;
}

onUnmounted(() => {
    clearInterval(timer);
})

</script>

<style lang="less" scoped>
.time {
    color: rgb(15, 64, 245);
}
</style>